<script setup>
import { nextTick, onBeforeMount, reactive, ref } from 'vue';
import { makeMockData } from './utils.js';

const repeatRef = ref(null);
const state = reactive({
  dataList: [],
  isLoading: false,
  hasLoadedAll: false,
  total: 0,
  //
  pageSize: 10,
  pageIndex: 0,
  //
  preloadOffset: 300,
  repeatVisible: false,
});
const loadingProps = reactive({
  showing: false,
});

const fetchPageData = () => {
  // if (state.hasLoadedAll || loadingProps.showing) return;

  const { List, Total } = makeMockData(state.pageIndex, state.pageSize, 256);
  console.log('fetchPageData', List, Total);

  return new Promise(resolve => {
    setTimeout(() => {
      state.dataList = state.dataList.concat(List || []);
      state.total = Total;
      state.hasLoadedAll = state.dataList.length >= Total;
      if (List && List.length) {
        state.pageIndex += 1;
      }
      resolve();
    }, 400);
  });
};

const onScrollLoad = async (index, size, done) => {
  try {
    await fetchPageData();
    console.log('done', state.hasLoadedAll);
    done({ stop: state.hasLoadedAll, totalCount: state.total });
  } catch (error) {
    console.log(error);
  }
};

const onRefresh = async () => {
  reset();
};

const reset = () => {
  state.dataList = [];
  state.hasLoadedAll = false;
  state.total = 0;
  state.pageIndex = 0;
  repeatRef.value.reload();
};

onBeforeMount(() => {
  state.repeatVisible = true;
});
</script>

<template>
  <div class="q-pa-md q-gutter-sm shadow-1">
    <h6>上划加载分页数据</h6>
    <div>
      <ul>
        <li>数据总条数：{{ state.total }}</li>
        <li>当前数据条数：{{ state.dataList.length }}</li>
        <li>当前已获取页：{{ state.pageIndex }}</li>
        <li>当前每页条数：{{ state.pageSize }}</li>
      </ul>
      <t-button color="primary" @click="reset">重置</t-button>
    </div>

    <t-separator></t-separator>

    <t-repeat
      ref="repeatRef"
      :list="state.dataList"
      :offset="50"
      class="t-repeat"
      style="height: 400px"
      @scroll-load="onScrollLoad"
      @refresh="onRefresh"
    >
      <template #default>
        <t-item v-for="row in state.dataList" :key="row.id" clickable v-ripple>
          <t-item-section>
            <t-item-label>{{ row.description }}</t-item-label>
          </t-item-section>
        </t-item>
      </template>
    </t-repeat>

    <!-- <div
      v-if="state.repeatVisible"
      class="example-container scroll"
      style="overflow-y: auto; height: 400px; "
    >
      <t-infinite-scroll @load="onScrollLoad" :offset="100">
        <div
          v-for="(item, index) in state.dataList"
          :key="index"
          class="caption"
        >
          <p>{{ item.description }}</p>
        </div>
        <template v-slot:loading>
          <div class="row justify-center q-my-md">
            <q-spinner-dots color="primary" size="40px" />
          </div>
        </template>
      </t-infinite-scroll>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.t-repeat {
  height: 400px;
}
</style>
